<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/fanke.css" />
	</head>
	<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		$(function(){
//		定义一个变量来装图片的编号
		var c=0;
//		定时器函数
		function run(){
			c++;
			if(c>4){
				c=0
			}
//			找到图片给相应下标为c的图片出现,其他兄弟为图片的元素隐藏
		$('#fanke4 img').eq(c).show().siblings('img').hide();
//			以同样的方式让小点隐藏和出现
			$('#fanke4 ul li').eq(c).css({'background':'red'})
			.siblings('li').css({'background':'white'});
		}
//		定时器
			var timer=setInterval(run,2000)
//			给图片添加一个鼠标移入事件，鼠标移入时清除定时器
			$('#fanke4 img').mouseenter(function(){
				clearInterval(timer);
			})
//			给图片添加一个鼠标移出事件，鼠标移出时恢复定时器
			$('#fanke4 img').mouseout(function(){
//				恢复定时器
			timer=setInterval(run,2000)
			})
//			给小原点添加移入事件，鼠标移入时清除定时器
			$('#fanke4 ul li').mouseenter(function(){
				 c=$(this).index(),
				$('#fanke4 img').eq(c).show().siblings('img').hide();
//				以同样的方式让小点隐藏和出现
				$('#fanke4 ul li').eq(c).css({'background':'red'})
			.siblings('li').css({'background':'white'});
				
			})
//			给圆点添加一个鼠标移入事件，鼠标移入时清理定时器
			$('#fanke4 ul li').mouseenter(function(){
				clearInterval(timer);
				
			})
//			给圆点添加一个鼠标移出事件，鼠标移出时恢复定时器
			$('#fanke4 ul li').mouseout(function(){
				
				timer=setInterval(run,2000)
			})
//			给两个箭头添加点击事件,点击翻页并在移入时停止定时器
			$('.zuojian').mouseenter(function(){
				clearInterval(timer);
				
			})
			$('.zuojian').click(function(){
				c--;
				if(c<0){
					c=4
				}
				$('#fanke4 img').eq(c).show().siblings('img').hide();
//				以同样的方式让小点隐藏和出现
				$('#fanke4 ul li').eq(c).css({'background':'red'})
			.siblings('li').css({'background':'white'});
				
			})
			$('.youjian').mouseenter(function(){
				clearInterval(timer);
				
			})
			$('.youjian').click(function(){
				c++;
				if(c>4){
					c=0
				}
				$('#fanke4 img').eq(c).show().siblings('img').hide();
//				以同样的方式让小点隐藏和出现
				$('#fanke4 ul li').eq(c).css({'background':'red'})
			.siblings('li').css({'background':'white'});
				
			})
		})

	</script>
	<!--下拉菜单-->
	<script type="text/javascript">
		$(function(){
//			给pen添加一个鼠标移入事件,让下拉菜单出现
			$('.pen').mouseenter(function(){
										
				$(this).find('.erji1').stop().slideDown(500)
			})
//			给pen添加一个鼠标移出事件,让下拉菜单隐藏
			$('.pen').mouseleave(function(){
							
				$(this).find('.erji1').stop().slideUp(500)
			})
		})
		
	</script>
	
	<body>
		<!--凡客顶部欢迎菜单栏-->
		<div id="fanke1">
			<div id="fanke12">
				<img src="img/w2.jpg" />
				<img src="img/w1.jpg" />
				<a href="">网站公告</a>
				<a href="">我的订单</a>
				<a href="">注册</a>
				<span id="">
			&nbsp;|&nbsp;
		</span>
				<a href="">登陆</a>
				<span>
			您好，欢迎光临凡客诚品！&nbsp;&nbsp;
		</span>
			</div>
		</div>
		<!--凡客顶部第二块搜索栏-->
		<!--空白处-->
		<div id="kongbai">
		</div>
		<div id="fanke2">
			<div id="gouwuche">
				<span class="iconfont icon-gouwuche1">
				<span>购物车</span>
				<p>购物车里没东西</p>
			</div>
			<input type="button" id="anniu" value="搜索" />
			<input type="" name="" id="lankuang" value="搜“麻衬衫” ，体验与众不同" />
			<div id="remen">
				<span>热门搜索：</span>
				<a href="">&nbsp免烫衬衫&nbsp</a>
				<a href="">&nbsp水柔棉&nbsp</a> 
				<a href="">&nbsp熊本熊&nbsp</a> 
				<a href="">&nbsp麻衬衫&nbsp</a>  
				<a href="">&nbsp帆布鞋&nbsp</a> 
				<a href="">&nbsp运动户外&nbsp</a>
				<a href="">&nbsp家居&nbsp</a> 
			</div>
		</div>
		<!--凡客顶部第三块，导航栏-->
		<div id="fanke3">
			<img src="img/fan8.png"/>
			<p class="p2">首页</p>
			
			<div class="pen">
				<span>衬衫</span>
				<div class="erji1">
					<a href="">免烫</a>
					<a href="">易打理</a>
					<a href="">休闲</a>
				</div>
			</div>
			<div class="pen">
				<span>T恤</span>
				<div class="erji1">
					<a href="">免烫</a>
					<a href="">易打理</a>
					<a href="">休闲</a>
				</div>
			</div>
			<div class="pen">
				<span>卫衣</span>
				<div class="erji1">
					<a href="">免烫</a>
					<a href="">易打理</a>
					<a href="">休闲</a>
				</div>
			</div>
			<div class="pen">
				<span>外套</span>
				<div class="erji1">
					<a href="">免烫</a>
					<a href="">易打理</a>
					<a href="">休闲</a>
				</div>
			</div>
			<div class="pen">
				<span>针织衫</span>
				<div class="erji1">
					<a href="">免烫</a>
					<a href="">易打理</a>
					<a href="">休闲</a>
				</div>
			</div>
			<div class="pen">
				<span>裤装</span>
				<div class="erji1">
					<a href="">免烫</a>
					<a href="">易打理</a>
					<a href="">休闲</a>
				</div>
			</div>
			<div class="pen">
				<span>鞋</span>
				<div class="erji1">
					<a href="">免烫</a>
					<a href="">易打理</a>
					<a href="">休闲</a>
				</div>
			</div>
			<div class="pen">
				<span>家居配饰</span>
				<div class="erji1">
					<a href="">免烫</a>
					<a href="">易打理</a>
					<a href="">休闲</a>
				</div>
			</div>
			<div class="pen">
				<span>内衣袜品</span>
				<div class="erji1">
					<a href="">免烫</a>
					<a href="">易打理</a>
					<a href="">休闲</a>
				</div>
			</div>
			
		</div>
		<!--轮播图-->
		<div id="fanke4">
			<!--图片-->
			<img style="display: block;" src="img/fan9.jpg"/>
			<img src="img/fan10.jpg"/>
			<img src="img/fan11.jpg"/>
			<img src="img/fan12.jpg"/>
			<img src="img/fan13.jpg"/>
			<!--点-->
			<ul>
				<li style="background: red;"></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				
			</ul>
			<p class="zuojian"><</p>
			<p class="youjian">></p>
			
			
		</div>
		<!--立即充值部分-->
		<div id="fanke5">
			<img src="img/fan1.jpg"/>
		</div>
		<!--每日秒杀部分-->
		<div id="fanke6">
			
		</div>
		<!--秒杀商品类-->
		<div id="fanke7">
		<!--第一张图-->
		<div id="zhaozi">
      		<div class="tu1">
				<img src="img/fan3.jpg"/>
				<p class="p1">
					凡客T恤 水柔棉jade cotton 短袖V领 男款 黑色
				</p>
					<s class="p2">
						<span class="iconfont icon-gouwuche1">
						398</s>
					<p class="p3">
						<span class="iconfont icon-gouwuche1">
						198</p>
					<p class="p4">充值后<span>99</span>元</p>
			</div>
			<!--图2-->
			<div class="tu1">
				<img src="img/fan3.jpg"/>
				<p class="p1">
					凡客T恤 水柔棉jade cotton 短袖V领 男款 黑色
				</p>
					<s class="p2">
						<span class="iconfont icon-gouwuche1">
						398</s>
					<p class="p3">
						<span class="iconfont icon-gouwuche1">
						198</p>
					<p class="p4">充值后<span>99</span>元</p>
			</div>
			<!--图3-->
			<div class="tu1">
				<img src="img/fan3.jpg"/>
				<p class="p1">
					凡客T恤 水柔棉jade cotton 短袖V领 男款 黑色
				</p>
					<s class="p2">
						<span class="iconfont icon-gouwuche1">
						398</s>
					<p class="p3">
						<span class="iconfont icon-gouwuche1">
						198</p>
					<p class="p4">充值后<span>99</span>元</p>
			</div>
			<!--图4-->
			<div class="tu1">
				<img src="img/fan3.jpg"/>
				<p class="p1">
					凡客T恤 水柔棉jade cotton 短袖V领 男款 黑色
				</p>
					<s class="p2">
						<span class="iconfont icon-gouwuche1">
						398</s>
					<p class="p3">
						<span class="iconfont icon-gouwuche1">
						198</p>
					<p class="p4">充值后<span>99</span>元</p>
			</div>
			<!--图5-->
			<div class="tu1">
				<img src="img/fan3.jpg"/>
				<p class="p1">
					凡客T恤 水柔棉jade cotton 短袖V领 男款 黑色
				</p>
					<s class="p2">
						<span class="iconfont icon-gouwuche1">
						398</s>
					<p class="p3">
						<span class="iconfont icon-gouwuche1">
						198</p>
					<p class="p4">充值后<span>99</span>元</p>
			</div>
			</div>
		</div>
		<!--熊本熊T恤-->
		<div id="fanke8">
			<img class="img" src="img/fan1.jpg"/>
		</div>
		<!--T恤产品类-->
		<div id="fanke9">
			<img src="img/0425pcsyx_07.jpg"/>
			<img src="img/0425pcsyx_07.jpg"/>
			<img src="img/0425pcsyx_07.jpg"/>
			<img src="img/0425pcsyx_07.jpg"/>
		</div>
		<!--新品预售-->
		<div id="fanke10">
			<img class="img" src="img/fan1.jpg"/>
		</div>
		<!--T恤产品类-->
		<div id="fanke11">
			<img src="img/0425pcsyx_07.jpg"/>
			<img src="img/0425pcsyx_07.jpg"/>
			<img src="img/0425pcsyx_07.jpg"/>
			<img src="img/0425pcsyx_07.jpg"/>
		</div>
		
		<!--优选推荐-->
		<div id="fanke12">
			优选推荐
		</div>
		<div id="fanke13">
			<div class="tu2">
				<img src="img/fan20.jpg"/>
				
				<span>吉國武衬衫</span>
				<a href="">充值购买更优惠</a>
			</div>
			<div class="tu3">
				<div class="tu31">
					<img style="width: 290px;height: 175px;" src="img/fan21.jpg"/>
					<span>吉國武衬衫</span>
				<a href="">充值购买更优惠</a>
				</div>
				<div class="tu32">
					<img style="width: 290px;height: 180px;" src="img/fan21.jpg"/>
					<span>吉國武衬衫</span>
				<a href="">充值购买更优惠</a>
				</div>
			</div>
			<div class="tu4">
				<img src="img/pc4.jpg"/>
				<span>吉國武衬衫</span>
				<a href="">充值购买更优惠</a>
			</div>
		</div>
		
		
		
		<div id="fanke14">
			<div class="tu2">
				<img src="img/fan20.jpg"/>
				
				<span>吉國武衬衫</span>
				<a href="">充值购买更优惠</a>
			</div>
			<div class="tu3">
				<div class="tu31">
					<img style="width: 290px;height: 175px;" src="img/fan21.jpg"/>
					<span>吉國武衬衫</span>
				<a href="">充值购买更优惠</a>
				</div>
				<div class="tu32">
					<img style="width: 290px;height: 180px;" src="img/fan21.jpg"/>
					<span>吉國武衬衫</span>
				<a href="">充值购买更优惠</a>
				</div>
			</div>
			<div class="tu4">
				<img src="img/pc4.jpg"/>
				<span>吉國武衬衫</span>
				<a href="">充值购买更优惠</a>
			</div>
		</div>
		
		<!--下装推荐-->
		<div id="fanke15">
			下装推荐
		</div>
		<!--推荐产品-->
		<div id="fanke16">
			<div class="tui1">
				<img src="img/fan6.jpg"/>
				<span>吉國武衬衫</span>
				<a href="">充值购买更优惠</a>
			</div>
			<div class="tui1">
				<img src="img/fan6.jpg"/>
				<span>吉國武衬衫</span>
				<a href="">充值购买更优惠</a>
			</div>
			<div class="tui1">
				<img src="img/fan6.jpg"/>
				<span>吉國武衬衫</span>
				<a href="">充值购买更优惠</a>
			</div>
			<div class="tui1">
				<img src="img/fan6.jpg"/>
				<span>吉國武衬衫</span>
				<a href="">充值购买更优惠</a>
			</div>
		</div>
	<!--更多精品-->
	<div id="fanke17">
			更多精品
		</div>
		
		<div id="fanke18">
			<img src="img/pcfbx.jpg"/>
			<img src="img/pcfbx.jpg"/>
			<img src="img/pcfbx.jpg"/>
		</div>
		<div id="fanke19">
			<img src="img/pcfbx.jpg"/>
			<img src="img/pcfbx.jpg"/>
			<img src="img/pcfbx.jpg"/>
		</div>
		<!--服务热线-->
		<div id="fanke20">
			<div class="kefu1">
				<div class="kefu2">
					<img style="width: 42px;height: 42px;margin-bottom: 30px;" src="img/onlinecustomer.png"/>
					<p>7*9小时在线客服</p>
				</div>
				
				<div class="kefu2">
					<img src="img/seven.png"/>
					<p>7天内退货</p>
					<p>购物满199元免运费</p>
				
				</div>
				<div class="kefu3">
					<img src="img/2014_8_29_16_39_33_7709.jpg"/>
				  	<p>扫描下载<a href="">凡客</a>客户端</p>
				</div>
			</div>
			<div class="kefu4">
				
		
			<a class="a1" href="">关于凡客</a>
				<a class="a" href="">新手指南</a>
				<a class="a" href="">配送范围及时间</a>
				<a class="a" href="">支付方式</a>
				<a class="a" href=""> 售后服务</a>
				<a class="a" href="">帮助中心</a>
				</div>
		
		</div>
		<div id="fanke21">

			
		</div>
		
	</body>

</html>